import { Select,Form,Card} from 'antd';
import React, {useEffect ,useState} from 'react';
import {useAppDispatch} from "@/store/index"
import {getCategoryListAsync,getCategory2ListAsync,getCategory3ListAsync} from "@/store/modules/category"
import { useSelector } from 'react-redux';


const Category: React.FC = () =>{ 
  const [form] = Form.useForm()
  const { Option } = Select;
  const dispatch = useAppDispatch()
  const [ca3,setCa3] = useState([])
  const {category1List,category2List,category3List} = useSelector((state:any)=>state.category)
  useEffect(()=>{
    dispatch(getCategoryListAsync())
    setCa3(category3List)
  },[category3List])
  return(
  <>
  <Card hoverable>
    <Form layout="inline"
    form={form}
    >
      <Form.Item label="一级分类" name="category1" >
        <Select
        placeholder="请选择一级分类"
        style={{ width: 320 }}
        onChange={(value)=>{
          dispatch(getCategory2ListAsync(value))
          form.setFieldsValue({
            category2: undefined,
            category3: undefined,
        });
        setCa3([])
        }}
      >
        {category1List.map((item:any) => {
                                    return (
                                        // value代表option选中的值
                                        <Option  key={item.id}>
                                            {item.name}
                                        </Option>
                                    );
      })                      
        }

      </Select>
      </Form.Item>
   
      <Form.Item label="二级分类" name="category2"  >
      <Select
      placeholder="请选择二级分类"
      style={{ width: 320 }}
      onChange={(value)=>{
        dispatch(getCategory3ListAsync(value))
        form.setFieldsValue({
          category3: undefined,
      });
     
      }}
    >
       {category2List.map((item:any) => {
                                    return (
                                        // value代表option选中的值
                                        <Option  key={item.id}>
                                            {item.name}
                                        </Option>
                                    );
      })                      
        }
    </Select>
      </Form.Item>
      <Form.Item label="三级分类" name="category3">
      <Select
       placeholder="请选择三级分类"
      style={{ width: 320 }}
    >
       {ca3.map((item:any) => {
                                    return (
                                        // value代表option选中的值
                                        <Option  key={item.id}>
                                            {item.name}
                                        </Option>
                                    );
      })                      
        }
    </Select>
      </Form.Item>
    </Form>
  </Card>
</>)

    }
export default Category;